<template>
  <div class="order-desc">
    <span style="padding-right:10px;">备注：</span>
    <div v-if="showOption"
         style="display: inline;">
      <el-select clearable
                 placeholder="请选择"
                 @input="handleInput">
        <el-option v-for="item in options"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div v-else
         style="display: inline;">{{ order.orderDesc }}</div>
  </div>
</template>

<script>
import OrderMixin, { STATUS_CODES } from "@/components/order/order.mixin";
export default {
  name: "OrderDesc",
  mixins: [OrderMixin],
  props: {
    order: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      options: [
        {
          value: 1,
          label: "无延迟"
        }, {
          value: 2,
          label: "正常延期"
        }, {
          value: 3,
          label: "客户要求"
        }, {
          value: 4,
          label: "商务要求"
        }
      ]
    }
  },
  computed: {
    showOption () {
      return (this.order.status === STATUS_CODES.WAIT_SIGN);
    },
  },
  methods: {
    handleInput (optionValue) {
      this.$emit("option", optionValue);
    }
  }
}
</script>

<style scoped>
.order-desc {
  padding-bottom: 10px;
}
</style>